<template>
    <el-button class="btn-settings" type="primary" icon="el-icon-tools" size="large" @click="visible = true" />
    <el-drawer v-model="visible" title="系统配置" size="300">
        <div class="settings-content">
            <el-alert
                class="notice"
                title="以下配置可实时预览，开发者可在 @/config/settings.ts 中配置默认值，非常不建议在生产环境下开放布局设置"
                type="error"
                :closable="false"
            />
            <el-scrollbar>
                <el-form label-width="100px" label-position="left">
                    <el-divider>主题颜色</el-divider>
                    <el-form-item label="预置颜色">
                        <div class="themes">
                            <template v-for="item in ThemeColors" :key="item.primary">
                                <el-tooltip :content="item.name">
                                    <el-icon
                                        :style="{ backgroundColor: item.primary }"
                                        size="16"
                                        @click="settings.switchSettings('themeColor', item.primary)"
                                    >
                                        <el-icon-check v-if="settings.themeColor === item.primary" />
                                    </el-icon>
                                </el-tooltip>
                            </template>
                        </div>
                    </el-form-item>
                    <el-form-item label="自定义">
                        <el-color-picker
                            :model-value="settings.themeColor"
                            @change="(value) => settings.switchSettings('themeColor', value)"
                        />
                    </el-form-item>
                    <el-divider>导航模式</el-divider>
                    <el-form-item label="固定Header">
                        <el-switch
                            :model-value="settings.fixedHeader"
                            @change="(value) => settings.switchSettings('fixedHeader', value)"
                        />
                    </el-form-item>
                    <el-form-item label="固定侧边栏">
                        <el-switch
                            :model-value="settings.fixedSide"
                            @change="(value) => settings.switchSettings('fixedSide', value)"
                        />
                    </el-form-item>
                    <el-form-item label="折叠菜单">
                        <el-switch
                            :model-value="settings.collapsed"
                            @change="(value) => settings.switchSettings('collapsed', value)"
                        />
                    </el-form-item>
                    <el-divider>内容区域</el-divider>
                    <el-form-item label="菜单栏">
                        <el-switch
                            :model-value="settings.menu"
                            @change="(value) => settings.switchSettings('menu', value)"
                        />
                    </el-form-item>
                    <el-form-item label="顶栏">
                        <el-switch
                            :model-value="settings.header"
                            @change="(value) => settings.switchSettings('header', value)"
                        />
                    </el-form-item>
                    <el-form-item label="面包屑导航">
                        <el-switch
                            :model-value="settings.breadcrumb"
                            @change="(value) => settings.switchSettings('breadcrumb', value)"
                        />
                    </el-form-item>
                    <el-form-item label="标签栏">
                        <el-switch
                            :model-value="settings.tagsView"
                            @change="(value) => settings.switchSettings('tagsView', value)"
                        />
                    </el-form-item>
                    <el-form-item label="公共底部">
                        <el-switch
                            :model-value="settings.footer"
                            @change="(value) => settings.switchSettings('footer', value)"
                        />
                    </el-form-item>
                    <el-divider>系统设置</el-divider>
                    <el-space fill>
                        <el-alert type="warning" :closable="false">在项目根目录的.env文件中定义</el-alert>
                        <el-form-item label="项目名称">{{ settings.title }}</el-form-item>
                    </el-space>
                    <el-form-item label="是否缓存组件">
                        <el-space>
                            <el-switch
                                :model-value="settings.keepAlive"
                                @change="(value) => settings.switchSettings('keepAlive', value)"
                            />
                            <el-popover width="400">
                                <template #reference>
                                    <el-icon size="20"><el-icon-info-filled /></el-icon>
                                </template>
                                <el-alert type="warning" :closable="false">
                                    是否对组件启用缓存，启用后组件新增actived/deactived生命周期，启用后在路由配置中设置的keepAlive才会生效，此效果需要刷新页面才可预览。
                                </el-alert>
                            </el-popover>
                        </el-space>
                    </el-form-item>
                    <el-form-item label="开启权限控制">
                        <el-space>
                            <el-switch
                                :model-value="settings.auth"
                                @change="(value) => settings.switchSettings('auth', value)"
                            />
                            <el-popover width="400">
                                <template #reference>
                                    <el-icon size="20"><el-icon-info-filled /></el-icon>
                                </template>
                                <el-alert type="warning" :closable="false">
                                    开启后增加权限控制功能并且没有权限的路由不会出现在菜单中，权限控制是基于页面的权限控制功能，在开发环境默认关闭，其他环境下默认开启。
                                </el-alert>
                            </el-popover>
                        </el-space>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>
        <template #footer>
            <div class="footer">
                <el-button type="primary" icon="el-icon-copy-document" size="large" @click="handleCopy">
                    拷贝设置
                </el-button>
                <el-button type="info" icon="el-icon-tools" size="large" @click="settings.reset">恢复默认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ThemeColors from "@/config/themes";
import { useSettingsStore } from "@/stores/settings";
import copy from "@/utils/copy";
const visible = ref(false);
const settings = useSettingsStore();

const handleCopy = () => {
    copy(JSON.stringify(settings.$state));
};
</script>

<style lang="scss" scoped>
.settings-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    .notice {
        flex: none;
        margin-bottom: 16px;
    }
    .themes {
        display: flex;
        .el-icon {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
            &:not(:last-of-type) {
                margin-right: 4px;
            }
        }
    }
}
.btn-settings {
    width: 40px;
    height: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 10;
}
.footer {
    display: flex;
    justify-content: space-between;
    .el-button {
        width: 100%;
    }
}
</style>
